// 饼图
function binChart(pie){
    const myChart  = echarts.init(document.querySelector('.pie'))
    const option = {
        // 标题
        title:{
            text:'籍贯 Hometown',
            textStyle:{
                color:'#6d767e'
            }
        },
        // 提示
        tooltip:{
            formatter:'{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
        },
        // 系列数据
        series: [
          {
            // 图形名称
            name: '各地学员分布',
            // 类形
            type: 'pie',
            // 半径
            // 第一个数组的值是内部圆的半径
            // 第一个数组的值是外部圆的半径
            radius: ['10%', '60%'],
            // 圆的中心点位置
            center: ['50%', '50%'],
            // roseType: area | radius
            //'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
            //'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
            roseType: 'radius',
            // 扇区样式
            itemStyle: {
              borderRadius: 4
            },
            // 数据
            data: pie
          }
        ]
      };
    myChart.setOption(option)
}

// 线形图
function lineChart(xData,salary,truesalary){
    const myChart = echarts.init(document.querySelector('.line'))
    const option = {
        // 补充
        legend:{
            data:['期望薪资','实际薪资'],
            top:20
        },

        color:['#ee6666','#5470c6'],
        // 工具提示组件
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        // 标题组件
        title: {
          left: '0',
          text: '薪资 Salary',
          textStyle:{
            color:'#6d767e'
          }
        },
        // x轴
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data:xData
        },
        // y轴
        yAxis: {
          type: 'value',
          // 上下留白
          // 最大值+最大值*50% = 15000+7500 = 22500
          boundaryGap: [0, '10%']
        },
        // 滑块组件
        // type: 
        // inside 内置组件  鼠标滚轮实现数据的滚动
        // select 选择
        // slider 滑块 默认值 
        dataZoom: [
          {
            // 滑块宽度百分比起始点
            start: 0,
            // 滑块宽度百分比结束点
            end: 100
          }
        ],
        series: [
          {
            name: '期望薪资',
            type: 'line',
            // 是否数据小圆点
            symbol: 'none',
            smooth:true,
            data: salary
          },
          {
            name: '实际薪资',
            type: 'line',
            // 是否数据小圆点
            symbol: 'none',
            smooth:true,
            data: truesalary
          }
        ]
      };
    myChart.setOption(option)
}


// 柱状图
function  barChart({avgScore,group,gt60,gt80,lt60} ){
    const myChart = echarts.init(document.querySelector('.barChart'))
    const option = {
        // 补充配置
        grid:{
            top:30,
            bottom:30,
            left:'7%',
            right:'7%'
        },
        // color:[],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
        //   data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
          {
            type: 'category',
            data:group,
            // axisPointer: {
            //   type: 'shadow'
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 100,
            // 值间隔
            interval: 10,
            axisLabel: {
              formatter: '{value} 分'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: '{value} 人'
            }
          }
        ],
        series: [
          {
            name: '平均分',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            barWidth: '15',
            data: avgScore
          },
          {
            name: '不及格',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            // 以下标为1的第二个y轴为准
            yAxisIndex: 1,
            barWidth: '15',
            data: lt60
          },
          {
            name: '60~80分之间',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            yAxisIndex: 1,
            barWidth: '15',
            data: gt60
          },
          {
            name: '高于80分人数',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            yAxisIndex: 1,
            barWidth: '15',
            data: gt80
          },
          
        ]
      };
    myChart.setOption(option)
}




// 地图
  function  mapChart(chinaGeoCoordMap,chinaDatas) {
    const myChart = echarts.init(document.querySelector('.map'))
    var chinaGeoCoordMap = chinaGeoCoordMap;
    var chinaDatas = chinaDatas
    ;

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
        var toCoord = [116.4551, 40.2539];
        //  [116.4551, 40.2539
        if (fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
            value: dataItem[0].value
          }, {
            coord: toCoord,
          }]);
        }
      }
      return res;
    };
    var series = [];
    [['湖南省', chinaDatas]].forEach(function (item, i) {
      console.log(item)
      series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: .3 //尾迹线条曲直度
          }
        },
        data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {//圆环显示文字
              return params.data.name;
            },
            fontSize: 13
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 5 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              //offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: "#0f0"
              }
            },
            emphasis: {
              show: true,
              color: "#f60"
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [{
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          }],
        }
      );
    });

    // 
    let option = {
      // 标题
      title: {
        // left: 'center',
        text: '来京路线 From',
        textStyle: {
          color: '#6d767e'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          return res;
        }
      },
      backgroundColor: "#fff",
      visualMap: { // 图例值控制（官方叫做视觉映射组件）
        min: 0,
        max: 1,
        calculable: true,
        show: false,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    };
    myChart.setOption(option)
  }

  // 渲染
  ; (function () {
    axios.get('/student/overview').then((res) => {
      console.log(res);
      const { code, data: { total, avgSalary, avgAge, proportion }, massage } = res.data
      console.log(total, avgSalary, avgAge, proportion);
      document.querySelector('.total').innerHTML = total
      document.querySelector('.avgSalary').innerHTML = avgSalary
      document.querySelector('.avgAge').innerHTML = avgAge
      document.querySelector('.proportion').innerHTML = proportion
      
    })
  })()
  // 显示与影藏
  ; (() => {
    document.querySelector('#batch').style.display = 'block'
    
  })()
  // 事件委托  点击出现相应是我渲染图像
  ; (function () {
    const lis = document.querySelectorAll('#batch li')
    for (let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('click', function () {
        axios.get('/score/batch', { params: { batch: i + 1 } }).then(res => {
          const { code, data, message } = res.data
          // console.log(res.data.data);
          barChart(data)
        })
      })
    }
    document.querySelectorAll('#batch li')[0].click()
  })()
  
  //  渲染折线图,获取学员信息
  ; (function () {
    axios.get('/student/list').then(({data:res}) => {
      // console.log(res);
      const info = res.data
      console.log(info);
      // 提前准备空数据
      const xData = []
      const salary = []
      const truesalary = []
      const chinaGeoCoordMap = { '北京市': [116.4551, 40.2539] }
      // 由于渲染的数据中没有北京，所以需要提前添加
      const chinaDatas = []
      const pie = []
      info.forEach((item) => {
        const index = pie.findIndex(v => item.province === v.name)
        if (index > -1) {
          pie[index].value++
        } else {
          pie.push({value:1,name:item.province})
        }
        
        xData.push(item.name)
        salary.push(item.salary)
        truesalary.push(item.truesalary)
        let sheng = item.province
        // 这和给对象添加数据时要留意一下，如果键是变量，用中括号
        chinaGeoCoordMap[sheng] = [item.jing, item.wei]
        // 推送的数据这里可以直接进行套娃
        chinaDatas.push([{ name: item.province, value: 0 }])
        // 公共的部分不用想name多，直接推就好
      })
      lineChart(xData, salary, truesalary)
      mapChart(chinaGeoCoordMap, chinaDatas)
      binChart(pie)
      

    })
  })()